<template>
    

    
    <div class="common-layout">
      <el-container>
        <el-aside width="300px">
          <img :src="from.image" style="height: 250px;width: 250px;" >
        </el-aside>
        <el-main>
          <table>
              <tr>
                  <td colspan="2"><h1>{{ from.shopName }}</h1></td>
                  
              </tr>
              <tr>
                  <td>生产批次：{{ from.batch }}</td>
                  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;保质期：{{ from.expiration }}天</td>
              </tr>
              <tr>
                  <td>生产许可证号：{{ from.production_License }}</td>
                  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生产企业：{{ from.manufacturing }}</td>
              </tr>
              <tr>
                  <td colspan="2"><h2>产品检验报告</h2></td>
                  
              </tr>
              <tr>
                  <td colspan="2">
                      <el-upload
                              class="avatar-uploader"
                              v-model:file-list="fileList"
                              action="https://localhost:44333/Traceability/UploadFileSecond"
                              :on-success="handleAvatarSuccess"
                              list-type="picture-card"
                              :on-preview="handlePictureCardPreview"
                              :on-remove="handleRemove"
                          >
                              <el-icon><Plus /></el-icon>
                          </el-upload>
  
                          <el-dialog v-model="dialogVisible">
                              <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                  </td>
              </tr>
          </table>
        </el-main>
      </el-container>
    </div>
  
  
  
  
  
  </template>
  <script lang="ts" setup>
  import { DelPicc } from '@/api/admin/index'
  import { Plus } from '@element-plus/icons-vue'
  import {type Pic} from '@/api/admin/type'
  import{AddPic} from '@/api/admin/index'
  import type { UploadProps, UploadUserFile } from 'element-plus'
  import {GetTraceabilityIndexById} from '@/api/admin/index'
  import { reactive, ref,onMounted } from 'vue'
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
  import { useRouter, useRoute } from 'vue-router'
  import axios from 'axios'
  const route = useRoute()
  const router = useRouter()
  
  onMounted(()=>{
      GetTraceabilityById()
      console.log(rerepic.value);
      FarmMessage()
      console.log( from.value.radio1);
  })
  const from=ref({
      indexId:null,
    dialogFormVisible:false,
    shopName:'',
    batch:'',
    expiration:null,
    production_License:'',
    manufacturing:'',
    information:'',
    image:'',
    createById:null,
    createByName:'' ,
    createTime :'',
    isno:false,
    IsDeleted:false,
    imagess:'',
    fileList:[],
   
  })
  const rerepic=ref([])
  const data=ref([])
  console.log(from.value);
  const fileList = ref([
    {
      url: '',
    },
  ])
  
  
  const GetTraceabilityById = async () => {
      const res = await GetTraceabilityIndexById(Number(localStorage.getItem("TraceabilityId")));
      from.value = res.data;
      if (res.data.imagess) {
        const imagesArray = res.data.imagess.split(',');
  
        // 清空 fileList
        fileList.value = [];
  
        // 将每个图片路径添加到 fileList
        imagesArray.forEach(image => {
          fileList.value.push({ url: image.trim() });
        });
        console.log('File List:', fileList.value); // 查看结果
      } 
  };
  
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  
  const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
    
    DelPic(uploadFile.url)
  }
  const handleAvatarSuccess: UploadProps['onSuccess'] = (
    
    response,
    uploadFile
  ) => {
  const aa=('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''))
    console.log('https://localhost:44333'+JSON.stringify(response.url).replace(/"/g,''));
    console.log(aa);
   
    if (!fileList.value.some(file => file.url === aa.trim())) {
    fileList.value.push({ url: aa.trim() });
  }
   
     console.log(fileList.value);
     addpic(aa)
  }
  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
  
  }
  
  const DelPic=async(val:any)=>{
    
      let inputt=<Pic>{}
          inputt.iid=localStorage.getItem("TraceabilityId")
          inputt.pic=val
          console.log(inputt);
      const cc=await DelPicc(inputt)
      console.log(cc);
      GetTraceabilityById()
  }
  const addpic=async(val:any)=>{
      let input=<Pic>{}
          input.iid=localStorage.getItem("TraceabilityId")
          input.pic=val
        
          
      const bb=await AddPic(input)
      console.log(bb);
      GetTraceabilityById()
  }
  const FarmMessage=()=>{
      switch(from.value.radio1){
          case 1:
            router.push({name:"TraceabilityHusbandryDetails"})
          break;   
          case 2:
          router.push({name:"TraceabilitySlaughterDetails"})
          break;  
          case 3:
          router.push({name:"TraceabilityDeepProcessingDetails"})
          break;   
        }
  } 
  </script>
  